<template>
    <view class="page-creation-book">
        <u-form ref="form1" label-width="160rpx">
                <u-form-item label="分会名称">
                    <u-input v-model="form.guildsName" placeholder="请输入"/>
                </u-form-item>
                <u-form-item label="姓名">
                    <u-input v-model="form.name" placeholder="请输入"/>
                </u-form-item>
                <u-form-item label="手机号">
                    <u-input v-model="form.phone" type="number" placeholder="请输入"/>
                </u-form-item> 
                <u-form-item label="个人微信二维码" label-position="top">
                    <u-upload ref="refWxUrl" :action="upload.api" :header="upload.header" :file-list="upload.wxUrl" :max-count="1" :multiple="false" :auto-upload="true"></u-upload>
                </u-form-item>                
                <u-form-item label="理由" label-position="top">
                    <u-input v-model="form.reason" type="textarea" placeholder="请输入"/>
                </u-form-item>
            </u-form>
        <div class="mt-4">
            <u-button class="btn-deepCyan" :loading="btnLoading" @click="submitForm">提交申请</u-button>
        </div>
    </view>
</template>
<script setup lang="ts">
import {apiUrl} from '@/static/js/config';
import {onShow, onLoad } from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
const appStore = useAppStore();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const refWxUrl = ref();
let btnLoading = ref(false);
let form = reactive({
  "id": '',
  "name": '',
  "userId": null,
  "phone": '',
  "wxUrl": '',
  "guildsName": '',
  "reason": '',
  "whereGuildsId": null,
  "whereGuildsName": null,
});
let upload = reactive({
    // api: 'http://book.caochuanxi.com/api/admin/sys-file/upload',
    api: apiUrl + '/admin/sys-file/upload',
    header: {
        Authorization: `Bearer ${uni.getStorageSync('accessToken')}`,
        "TENANT-ID": 1,
        'CLIENT-TOC': 'Y'
    },
    wxUrl: [],
});
const verfiyForm = () => {
    if(!proxy.$verify.null(form.guildsName, '请填写分会名称')){
        return false;
    }
    if(!proxy.$verify.null(form.name, '请填写姓名')){
        return false;
    }
    if(!proxy.$verify.mobile(form.phone, '请填写正确的手机号码')){
        return false;
    }    
    let wxUrlList = refWxUrl.value.lists;
    if(wxUrlList.length == 0){
        uni.showToast({title: '请上传微信二维码', icon: 'none'});
        return false
    }else{
        form.wxUrl = proxy.$util.getImageUrl(wxUrlList);
    }
    return true;
}
const submitForm = () => {
    if(!verfiyForm()){
        return;
    }
    btnLoading.value = true;
    proxy.$http('post', '/admin/guidsApply', form, (data,msg) => {
        btnLoading.value = false;
        uni.$u.toast('提交成功');
        uni.navigateBack(-1);
    },msg => {
        btnLoading.value = false;
    })
};
onShow(() => {   
    let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
    let guildInfo = appStore.guildInfo;
    form.userId = userInfo.userId;    
    form.whereGuildsId = guildInfo.guildId;
    form.whereGuildsName = guildInfo.guildName
});
</script>
<style>
page{height:100%;background:#fff;}
</style>